<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <title>南华严选</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <style>
        html{
            font-size: 10px;
        }
        body{
            font-size: 1.4rem;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        #app{
            /*元素可以比指定值高，但不能比其矮。*/
            min-height: 100%;
            font-size: 1.4rem;
            background: white;
        }

        .van-swipe img{
            display: block;
            width: 100%;
        }

        .brandList{
            margin-top: 2rem;
            width: 100%;
            height: 30rem;
        }
        .brandList .bl_title{
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            font-size: 1.2rem;
            font-weight: bold;
        }
        .brandList .bl_list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            height: 26rem;
        }
        .brandList .bl_list .bl_box{
            width: 48%;
            margin: 1%;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .brandList .bl_list .bl_name{
            padding-left: 1rem;
        }
        .brandList .bl_list .bl_price{
            padding-left: 1rem;
            color: red;
        }

        .goodList{
            margin-top: 2rem;
            width: 100%;
            height: 110rem;
            barkground: #fff;
        }
        .goodList p{
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            font-size: 1.2rem;
            font-weight: bold;
        }
        .goodList ul{
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            background: #fff;
        }
        .goodList ul li{
            width: 48%;
            margin-bottom: 1rem;
            background: #fff;
            text-align: center;
            border: 1px solid #efefef;
            line-height: 2.4rem;
        }
        .goodList ul li img{
            width: 100%;
        }
        .goodList ul li .price{
            color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        <!--搜索框-->
        <van-search
                v-model="value"
                shape="round"
                background="#4fc08d"
                placeholder="请输入搜索关键词"
        ></van-search>
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item>
                <img src="images/banner1.jpg" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="images/banner2.jpg" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="images/banner3.jpg" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="images/banner4.jpg" alt="" />
            </van-swipe-item>
        </van-swipe>

        <van-grid :column-num="5">
            <van-grid-item icon="images/channer1.png" text="居家" ></van-grid-item>
            <van-grid-item icon="images/channer2.png" text="餐具" ></van-grid-item>
            <van-grid-item icon="images/channer3.png" text="配件" ></van-grid-item>
            <van-grid-item icon="images/channer4.png" text="饮食" ></van-grid-item>
            <van-grid-item icon="images/channer5.png" text="电子" ></van-grid-item>
        </van-grid>

        <!--优质品牌供应商-->
        <div class="brandList">
            <p class="bl_title">优质品牌供应商</p>
            <div class="bl_list">
                <div class="bl_box" style="background-image: url('images/brand1.jpg')">
                    <p class="bl_name">面包机</p>
                    <p class="bl_price">￥998.00</p>
                </div>
                <div class="bl_box" style="background-image: url('images/brand2.jpg')">
                    <p class="bl_name">面包机</p>
                    <p class="bl_price">￥998.00</p>
                </div>
                <div class="bl_box" style="background-image: url('images/brand3.jpg')">
                    <p class="bl_name">面包机</p>
                    <p class="bl_price">￥998.00</p>
                </div>
                <div class="bl_box" style="background-image: url('images/brand4.jpg')">
                    <p class="bl_name">面包机</p>
                    <p class="bl_price">￥998.00</p>
                </div>
            </div>
        </div>
        <!--严选商品-->
        <div class="goodList">
            <p>严选商品</p>
            <div>
                <ul>
                    <li>
                        <img src="images/goods1.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods2.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods3.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods4.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods5.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods6.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods7.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                    <li>
                        <img src="images/goods8.png" alt="" style="display: block" >
                        <div class="van-ellipsis">橡胶枕头</div>
                        <div class="price">￥59.90</div>
                    </li>
                </ul>
            </div>
        </div>

        <!--底部标签栏-->
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item icon="home-o">主页</van-tabbar-item>
            <van-tabbar-item icon="search">搜索</van-tabbar-item>
            <van-tabbar-item icon="friends-o">群组</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o" url="main.html">设置</van-tabbar-item>
        </van-tabbar>
    </div>

    </div>
    <!--引入vue和vant的JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        // 在 #app 标签下渲染一个按钮组件
        var vue = Vue.createApp({
            data(){
                return {
                    value: "",
                    active: 0
                }
            },
            created(){
                axios.get("userServlet",{
                    params: {
                        op: "op"
                    }
                }).then(resp=>{
                    console.log( resp );
                })
            }
        });
        vue.use(vant);
        vue.mount('#app');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        vue.use(vant.Lazyload);

        // 调用函数组件，弹出一个 Toast
        vant.Toast('提示');

    </script>

</body>
</html>